<template>
  <div class="user-address-container">
    <div class="addressManagement" v-if="show == 1">
      <div class="header">
        <van-nav-bar
          title="地址管理"
          left-text="返回"
          left-arrow
          @click-left="$router.back()"
        />
      </div>

      <ul class="address-cards">
        <li v-for="item in addressList" :key="item.id" @click="backCart(item)">
          <van-swipe-cell>
            <div class="left-box">
              <div class="name">{{ item.name }}</div>
              <div class="address-info">
                <div class="first-line">
                  <div class="phone">{{ item.mobile }}</div>
                  <div class="default" v-if="item.is_default == 1">默认</div>
                </div>
                <div class="address">{{ item.address }}</div>
              </div>
              <div class="icon" @click="edit(item.id)">
                <img src="../images/edit.png" />
              </div>
            </div>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="deladdress(item.id)"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>

      <div class="footer-btn">
        <van-button color="#CEA62A" class="btn" @click="toggleView"
          >新建地址</van-button
        >
      </div>
    </div>

    <div class="newAddress" v-else>
      <div class="header">
        <van-nav-bar
          title="新建地址"
          left-text="返回"
          left-arrow
          @click-left="show = 1"
        />
      </div>

      <van-form
        validate-first
        @failed="onFailed"
        @submit="saveaddress"
        class="address-form"
        :show-error="false"
      >
        <van-field
          name="userName"
          placeholder="请输入收货人"
          label="收货人"
          :rules="rules['username']"
          v-model="params.userName"
        />
        <van-field
          name="telNumber"
          placeholder="请输入收货人手机号码"
          label="收货人"
          :rules="rules.phone"
          v-model="params.telNumber"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="params.address"
          :rules="rules.address"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-field
          name="pattern"
          placeholder="请输入收货人详细地址"
          label="详细地址"
          v-model="params.detailadress"
          :rules="rules.detailadress"
        />
        <div class="last-line">
          <van-field name="switch" label="设置为默认地址">
            <template #input>
              <van-switch
                v-model="params.checked"
                size="20"
                active-color="#CEA62A"
              />
            </template>
          </van-field>
        </div>
        <div class="save">
          <van-button class="save-btn">保存</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getListAction, saveAction, detailAction,deleteAction } from "@/api/user";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      show: "1",
      text: "",
      addressList: [],
      params: {
        address: "",
        addressId: "",
        checked: false,
        detailadress: "",
        openId: localStorage.getItem("openId"),
        telNumber: "",
        userName: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "输入的用户名不能为空",
            trigger: "onBlur",
          },
          {
            pattern: /^[\w-]{4,16}$/,
            message: "请输入4-16位的用户名",
            trigger: "onBlur",
          },
        ],
        phone: [
          {
            required: true,
            message: "输入的手机号不能为空",
            trigger: "onBlur",
          },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "onBlur",
          },
        ],
        address: [
          { required: true, message: "地址不能为空", trigger: "onBlur" },
        ],
        detailadress: [
          { required: true, message: "详细地址不能为空", trigger: "onBlur" },
        ],
      },
      showArea: false,
      areaList: areaList,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      let res = await getListAction({ openId: localStorage.getItem("openId") });
      this.addressList = res.data;
    },
    toggleView() {
      this.show = 2;
      this.title = "编辑地址";
      if (!this.params.id)
        this.params = Object.assign(this.params, this.$options.data().params);
    },
    async saveaddress() {
      let res = await saveAction(this.params);
      if (res.data) {
        this.show = 1;
        this.getdata();
        this.params = Object.assign(this.params, this.$options.data().params);
      }
    },
    onFailed(error) {
      console.log(error);
    },
    //选择省市区
    onConfirm(values) {
      this.params.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    async edit(id) {
      let res = await detailAction({ id });
      this.show = 2;
      this.params = {
        address: res.data.address,
        addressId: res.data.id,
        checked: res.data.is_default == 1 ? true : false,
        detailadress: res.data.address_detail,
        openId: localStorage.getItem("openId"),
        telNumber: res.data.mobile,
        userName: res.data.name,
      };
    },
    async backCart(item) {

      let res = await saveAction({
        address: item.address,
        addressId: item.id,
        checked: true,
        detailadress: item.address_detail,
        openId: localStorage.getItem("openId"),
        telNumber: item.mobile,
        userName: item.name,
      });
      this.getdata();
      if (this.$route.query.redirect)
        this.$router.replace(this.$route.query.redirect);
    },
    async deladdress(id){
      let res=await deleteAction({id})
      if(res.data)this.getdata()
    }
  },
};
</script>
 
<style scoped lang='scss'>
.user-address-container {
  height: calc(100vh - 108px);
  background-color: #f8f8f8;
  .header {
    height: 81px;
    padding-bottom: 20px;
    ::v-deep .van-nav-bar {
      height: 100%;
      .van-nav-bar__content {
        height: 100%;
      }
      .van-nav-bar__text {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }
      .van-icon {
        width: 30px;
        height: 30px;
        color: #000;
      }
      .van-nav-bar__title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .addressManagement {
    .address-cards {
      background-color: #f8f8f8;
      padding: 30.5px 20px 50px 20px;
      height: calc(100vh - 108px - 60px - 90px - 68px);
      overflow: auto;
      li {
        width: 100%;
        position: relative;
        display: flex;
        background-color: #fff;
        border-bottom: 1px solid rgba(223, 223, 223, 1);
        .left-box {
          padding: 55px 51px 36px 35px;
        }
        .van-swipe-cell {
          width: 100%;
        }
        .van-swipe-cell__right{
          height: 100%;
          .van-button--danger {
            height: 100%;
          }
        }

        .name {
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 600;
          margin-right: 21px;
        }
        .address-info {
          width: 383px;
          .first-line {
            display: flex;
            height: 40px;
            .phone {
              font-size: 28px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 400;
              margin-right: 24px;
              display: flex;
              align-items: center;
            }
            .default {
              width: 100px;
              height: 40px;
              border: 1px solid rgba(158, 66, 66, 1);
              border-radius: 4px;
              color: #9e4242;
              text-align: center;
            }
          }
          .address {
            margin-top: 16.5px;
            font-size: 28px;
            color: #999999;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
        .icon {
          position: absolute;
          right: 51px;
          bottom: 38px;
          width: 40px;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .footer-btn {
      height: 90px;
      position: fixed;
      width: 100%;
      bottom: 68px;
      padding: 0 20px;
      .btn {
        width: 100%;
        border-radius: 44.5px;
        font-size: 30px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .newAddress {
    .personInfo {
      padding: 45px 30px 0 30px;
      li {
        height: 80px;
        @include between;
        margin-bottom: 30px;
        .person-option-name {
          font-size: 30px;
          color: #131313;
          letter-spacing: 0;
          font-weight: 500;
          margin-right: 24px;
        }
        .info {
          background: #ffffff;
          border-radius: 14px;
          width: 546px;
          height: 100%;
          font-size: 28px;
          color: #464646;
          letter-spacing: 0;
          font-weight: 400;
        }
        input {
          padding-left: 32px;
          border: 0;
          background: #ffffff;
          border-radius: 14px;
          width: 546px;
          height: 100%;
          font-size: 28px;
          color: #464646;
          letter-spacing: 0;
          font-weight: 400;
        }
        .van-switch {
          width: 80px;
          height: 42px;
        }
        ::v-deep .van-switch__node {
          height: 42px;
          width: 42px;
        }
        ::v-deep .van-switch--on .van-switch__node {
          transform: translateX(42px);
        }
      }
    }
    .address-form {
      padding: 45px 30px 0 30px;
      .van-cell {
        margin-bottom: 30px;
        height: 80px;
        background-color: #f8f8f8;
        padding: 0;
        display: flex;
        align-items: center;
        overflow: visible;
      }
      ::v-deep .van-field__label {
        font-size: 30px;
        color: #131313;
        letter-spacing: 0;
        font-weight: 500;
      }
      ::v-deep .van-cell__value {
        background-color: #fff;
        height: 100%;
        padding: 21px 0 19px 32px;
        font-size: 28px;
        color: #464646;
        letter-spacing: 0;
        font-weight: 400;
      }
      .last-line {
        height: 50px;
        .van-cell {
          height: 100%;
          justify-content: space-between;
          ::v-deep .van-cell__title {
            width: 500px;
          }

          .van-switch {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
        ::v-deep .van-field__value {
          background-color: #f8f8f8;
        }
      }
    }
    .save {
      margin-top: 107px;
      height: 90px;
      padding: 0 20px;
      .save-btn {
        background-color: #cea62a;
        border-radius: 44.5px;
        height: 100%;
        width: 100%;
        font-size: 30px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
}
</style>